<template>
	<el-container id="app">
		<el-row class="app-main">
			<el-col :span=4 id="letfNav">
				<div class="search">
					<!--<div>
							<input class="search-input" type="text" />
							<button>搜索</button>
						</div>-->
					<button id="login" @click="login">登录</button>
				</div>
				<div class="nav">
						<router-link class="nav-ac1" to="/index">
							首页
						</router-link>
						<router-link class="nav-ac2" to="/diary">
							心情小记
						</router-link>
					<a class="nav-ac3" href="#">技术小抄</a>
					<a class="nav-ac5" href="#">羞羞小片</a>
					<a class="nav-ac4" href="#">关于本尊</a>
				</div>
			</el-col>
			<el-col :span=15>
				<el-main>
					<router-view/>
				</el-main>
			</el-col>
			<el-col :span=5>
				<div class="icnList">
					<span class="icnList-span">小记</span>
					<span class="icnList-span">vue</span>
					<span class="icnList-span">PHP</span>
					<span class="icnList-span">javascript</span>
					<span class="icnList-span">小记</span>
					<span class="icnList-span">vue</span>
					<span class="icnList-span">PHP</span>
					<span class="icnList-span">javascript</span>
				</div>
			</el-col>
		</el-row>
	</el-container>
</template>

<script>
	export default {
		name: 'App',
		methods: {
			login() {
				let master = {};
				this.$alert('<strong>账号</strong>', 'HTML 片段', {
					dangerouslyUseHTMLString: true,
					showInput: true
				}).then(({
					value
				}) => {
					master.id = value;
					console.info('idOk');
					this.$alert('<strong>密码</strong>', 'HTML 片段', {
						dangerouslyUseHTMLString: true,
						showInput: true
					}).then(({
						value
					}) => {
						master.pw = value;
						console.info('pwOk');
						console.info('master',master);
					}).catch(() => {
						console.info('no');
					});
				}).catch(() => {
					console.info('no');
				});
			}
		}
	}
</script>

<style>
	#login {
		opacity: 0;
		font-size: 40px;
	}
	
	.app-main {
		width: 100%;
	}
	
	#letfNav {
		background: #18222b;
		height: 100vh;
		overflow: auto;
	}
	
	.search {
		height: 170px;
		display: flex;
		justify-content: center;
		align-items: center;
		background: url(assets/img/leimu.jpg) no-repeat -102px center;
		background-size: 170%;
	}
	
	.search-input {
		height: 24px;
		background: rgba(255, 255, 255, .6);
	}
	
	.nav {
		padding-top: 32px;
	}
	
	.nav a {
		font-size: 18px;
		color: #fff;
		margin-bottom: 20px;
		display: block;
		text-align: center;
		padding: 16px;
	}
	
	.nav .nav-ac1:hover {
		background: url(assets/img/29.gif) #464e55 no-repeat right;
		background-size: 40px;
	}
	
	.nav .nav-ac2:hover {
		background: url(assets/img/37.gif) #464e55 no-repeat right;
		background-size: 40px;
	}
	
	.nav .nav-ac3:hover {
		background: url(assets/img/07.gif) #464e55 no-repeat right;
		background-size: 40px;
	}
	
	.nav .nav-ac4:hover {
		background: url(assets/img/41.gif) #464e55 no-repeat right;
		background-size: 40px;
	}
	
	.nav .nav-ac5:hover {
		background: url(assets/img/02.gif) #464e55 no-repeat right;
		background-size: 40px;
	}
	.icnList {
		margin-top: 20px;
	    padding: 10px;
	    border: 1px solid #ccc;
	    background: #f5f5f5;
	    border-radius: 6px;
	}
	.icnList-span {
		background-color: #1abc9c;
	    padding: 2px 10px;
	    border-radius: 6px;
	    color: #fff;
	    cursor: pointer;
	    margin-right: 10px;
	    margin-bottom: 10px;
	    display: inline-block;
	}
</style>